/****************
 *@description: 拼团活动数据看板  spellTogether/dashboards
 *@author: Xhd
 *@date: 2023-09-07 15:10:43
 *@version: V1.0.0
*************************************************************************/

import React, { Component } from "react";
import { getDateTime3 } from '@/utils/getDate';
import { apiGetSpellTogetherDashboards, apiExportDataDashboards } from "@/request/spellTogether";
import { Tooltip } from "antd";
import { QuestionCircleOutlined } from "@ant-design/icons";
import { exportSheetTable } from '@/utils/exportTable.js';
import TheQueryForm from '@/components/TheQueryForm';
import TheTableExtend from '@/components/TheTableExtend';
import TheTable from "@/components/TheTable";
import ThePagination from "@/components/ThePagination";
import TheButton from "@/components/TheButton";
import GoBack from '@/components/TheGoBack';
import _ from 'lodash';
class Dashboards extends Component {
  constructor() {
    super()
    this.queryFormRef = React.createRef()
    this.state = {
      form_show: true,
      dataSource: [],
      pageData: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      activityId:"",
      queryForm: {},
      NewColumns: [],
      searchOption: [
        { field: 'time', label: '统计时间', placeholder: '请选择', required: false, rules: [], type: 'RangePicker' },
        { field: 'goodsKeyWord', label: '商品id/名称', placeholder: '请输入商品id/名称', required: false, rules: [], type: 'Input', defaultValue: '' },
      ],
      columns: [
        {
          title: "日期",
          dataIndex: "createDate",
          key: "createDate",
        },
        {
          title: "商品id",
          dataIndex: "goodsId",
          key: "goodsId",
        },
        {
          title: "商品名称",
          dataIndex: "goodsName",
          key: "goodsName",
        },
        {
          title: "列表页点击人数",
          dataIndex: "listClickCount",
          key: "listClickCount",
          filterDropdown: true,
          filterIcon: () => {
            return (
              <Tooltip zIndex={999} placement="top" title={() => {
                return <div>
                  当日在拼团频道列表页点击该商品的人数（不包括通过搜索、推荐列表页点击的人数），根据手机号、设备id去重
                </div>
              }}  >
                <QuestionCircleOutlined />
              </Tooltip>
            );
          },
        },
        {
          title: "列表页点击次数",
          dataIndex: "listClickSum",
          key: "listClickSum",
          filterDropdown: true,
          filterIcon: () => {
            return (
              <Tooltip zIndex={999} placement="top" title={() => {
                return <div>
                  当日在拼团频道列表页点击该商品的次数（不包括通过搜索、推荐列表页点击的次数）
                </div>
              }}  >
                <QuestionCircleOutlined />
              </Tooltip>
            );
          },
        },
        {
          title: "拼团发起人数",
          dataIndex: "newTeamCount",
          key: "newTeamCount",
          filterDropdown: true,
          filterIcon: () => {
            return (
              <Tooltip zIndex={999} placement="top" title={() => {
                return <div>
                  当日该商品拼团任务发起的人数之和，根据手机号去重
                </div>
              }}  >
                <QuestionCircleOutlined />
              </Tooltip>
            );
          },
        },
        {
          title: "拼团发起次数",
          dataIndex: "newTeamSum",
          key: "newTeamSum",
          filterDropdown: true,
          filterIcon: () => {
            return (
              <Tooltip zIndex={999} placement="top" title={() => {
                return <div>
                  当日该商品拼团任务发起的次数之和（团长的支付时间在当天）
                </div>
              }}  >
                <QuestionCircleOutlined />
              </Tooltip>
            );
          },
        },
        {
          title: "裂变注册人数",
          dataIndex: "registerCount",
          key: "registerCount",
          filterDropdown: true,
          filterIcon: () => {
            return (
              <Tooltip zIndex={999} placement="top" title={() => {
                return <div>
                  当日通过该商品拼团任务分享后进入小程序，并完成注册的人数之和（注册时间在当天）
                </div>
              }}  >
                <QuestionCircleOutlined />
              </Tooltip>
            );
          },
        },
        {
          title: "成团人数",
          dataIndex: "teamSuccessCount",
          key: "teamSuccessCount",
          filterDropdown: true,
          filterIcon: () => {
            return (
              <Tooltip zIndex={999} placement="top" title={() => {
                return <div>
                  参加该商品的拼团活动且当日成团的人数（已成团时间为准，不考虑后续的退款，根据用户id去重）
                </div>
              }}  >
                <QuestionCircleOutlined />
              </Tooltip>
            );
          },
        },
        {
          title: "退单人数",
          dataIndex: "refundCount",
          key: "refundCount",
          filterDropdown: true,
          filterIcon: () => {
            return (
              <Tooltip zIndex={999} placement="top" title={() => {
                return <div>
                  当日完成对该商品的拼团活动退款的人数，根据用户id去重（以退款完成时间为准，不包括未成团自动退款的用户）；
                </div>
              }}  >
                <QuestionCircleOutlined />
              </Tooltip>
            );
          },
        },
        {
          title: "付款金额",
          dataIndex: "payPrice",
          key: "payPrice",
          filterDropdown: true,
          filterIcon: () => {
            return (
              <Tooltip zIndex={999} placement="top" title={() => {
                return <div>
                  当日参加该商品的拼团活动并完成付款的实付金额之和，不考虑后续的退款金额；保留2位有效数字
                </div>
              }}  >
                <QuestionCircleOutlined />
              </Tooltip>
            );
          },
        },
        {
          title: "退款金额",
          dataIndex: "refundPrice",
          key: "refundPrice",
          filterDropdown: true,
          filterIcon: () => {
            return (
              <Tooltip zIndex={999} placement="top" title={() => {
                return <div>
                  当日完成对该商品的拼团活动退款的金额之和（以退款完成时间为准）；保留2位有效数字
                </div>
              }}  >
                <QuestionCircleOutlined />
              </Tooltip>
            );
          },
        },
        {
          title: "退款率",
          dataIndex: "refundRate",
          key: "refundRate",
          filterDropdown: true,
          filterIcon: () => {
            return (
              <Tooltip zIndex={999} placement="top" title={() => {
                return <div>
                  退单率=退单人数/成团人数，保留2位有效数字
                </div>
              }}  >
                <QuestionCircleOutlined />
              </Tooltip>
            );
          },
          render: (text, record) => {
            return record.refundRate > 0 ? record.refundRate*100 + "%" : 0 +"%"
          }
        },
      ]
    }
  }

  componentDidMount() {
    this.onColumnsFilter(this.state.columns)
    this.setState({
      activityId: this.props.match.params.id
    },()=>{
      this.getData()
    })
  }

  async getData(values) {
    let { activityId } = this.state
    let { pageNo, pageSize } = this.state.pageData
    if (values && !_.isEmpty(values.time)) {
      values.beginTime = getDateTime3(values.time[0])
      values.endTime = getDateTime3(values.time[1])
      delete(values.time)
    }
    this.setState({
      queryForm: values === undefined ? this.state.queryForm : { ...values }
    }, async () => {
      const params = {
        pageNo, pageSize, queryForm: this.state.queryForm
      }
      let res = await apiGetSpellTogetherDashboards({
        activityId, pageNo, pageSize, ...this.state.queryForm
      })
      if (res.code === 0) {
        this.setState({
          dataSource: res.data,
          total: res.totalCount,
        })
      }
    })
  }

  onColumnsFilter = (value) => {
    this.setState({
      NewColumns: value
    })
  }

  onFormSearch(values) {
    this.setState({
      pageData: { pageNo: 1, pageSize: 10 }
    }, () => {
      this.getData(values)
    })
  }

  onReset() {
    this.setState({
      queryForm: {},
      pageData: {
        pageNo: 1,
        pageSize: 10
      },
    }, () => {
      this.getData()
    })
  }

  onTableRefresh() {
    this.getData()
  }

  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo,
        pageSize
      }
    }, () => {
      this.getData()
    })
  };

  async toExport() {
    const { queryForm, activityId } = this.state
    await apiExportDataDashboards({ ...queryForm, activityId }).then(res=>{
      if (res.code === 0 && res.data) {
        let th_arr = [
          {
            title: '拼团',
            prop: '',
            children: [
              {
                title: '日期',
                prop: 'createDate',
              },
              {
                title: '商品id',
                prop: 'goodsId',
              },
              {
                title: '商品名称',
                prop: 'goodsName',
              },
              {
                title: '列表页点击人数',
                prop: 'listClickCount',
                valueType: 'number'
              },
              {
                title: '列表页点击次数',
                prop: 'listClickSum',
              },
              {
                title: '拼团发起人数',
                prop: 'newTeamCount',
              },
              {
                title: '拼团发起次数',
                prop: 'newTeamSum',
              },
              {
                title: '裂变注册人数',
                prop: 'registerCount',
              },
              {
                title: '成团人数',
                prop: 'teamSuccessCount',
              },
              {
                title: '退单人数',
                prop: 'refundCount',
              },
              {
                title: '付款金额',
                prop: 'payPrice',
              },
              {
                title: '退款金额',
                prop: 'refundPrice',
              },
              {
                title: '退款率',
                prop: 'refundRate',
              },
            ]
          },
        ]
        let tb_arr = []
        res.data.map(res=>{
          res.refundRate = res.refundRate*100 + "%"
        })
        tb_arr = res.data
        exportSheetTable({ fileName: '拼团', tH_data: th_arr, tB_data: tb_arr, isSheet: true, merge: false })
      }
    })
  }

  render() {
    const { form_show, searchOption, columns, NewColumns, dataSource, pageData, total } = this.state
    return (<div className="p-layout-box commodity-examine">
      <GoBack history={this.props.history} title="数据看板" />
      <br />
      <TheQueryForm ref={(ref) => this.queryFormRef = ref} show={form_show} option={searchOption} onGetValues={(values) => this.onFormSearch(values)} onReset={() => { this.onReset() }}></TheQueryForm>

      <TheTableExtend
        columns={columns}
        onFormTrigger={() => this.setState({ form_show: !this.state.form_show })}
        onTableRefresh={() => this.onTableRefresh()}
        onColumnsFilter={(value) => { this.onColumnsFilter(value) }}
      >
        <TheButton haspermi={['procurement:List:create']} size="middle" onClick={() => this.toExport()} type="primary">导出</TheButton>
      </TheTableExtend>

      <TheTable
        scroll={{ x: "max-content", y: '63vh' }}
        columns={NewColumns}
        dataSource={dataSource}
      />

      <ThePagination
        pageNo={pageData.pageNo}
        pageSize={pageData.pageSize}
        total={total}
        pageChange={this.pageChange}
      />
    </div>)
  }
}

export default Dashboards
